<html>

<head>
    <meta charset="UTF-8">
    <title>SVM</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="dist/drawingboard.min.js"></script>
    <link type="text/plain" href="dist/drawingboard.min.css">
    <script type="text/javascript" src="dist/drawingboard.nocontrol.min.js"></script>
    <link type="text/plain" href="dist/drawingboard.nocontrol.min.css">
</head>
<style>
    .box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }

    #simple-board {
        width: 300px;
        height: 300px;
    }
</style>

<body style="background:#dedede" class="box">
    <div>
        <h1 id="result">请写下一个数字:</h1>
    </div>
    <br/>
    <div>
        <div id="simple-board"></div>
    </div>

</body>



<script type="text/javascript">
    $(document).ready(function () {
        var simpleBoard = new DrawingBoard.Board('simple-board', {
            controls: false,
            webStorage: false,
            size: 15
        });
        uuid = 'uuid'
        //listen to an event
        simpleBoard.ev.bind('board:stopDrawing', function () {
            $.ajax({
                type: "POST",
                url: "http://sz.loveamber.me:8888/savePicture",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ "picture": simpleBoard.getImg().split(',')[1] }),
                dataType: "json",
                success: function (message) {
                    console.log(uuid = message['uuid'])
                    getResult()
                }
            });
        });
        function getResult() {
            var interval = setInterval(function () {
                $.get('http://sz.loveamber.me:8888/getResult/' + uuid, function (data, status, xhr) {
                    if (status != 'success') {
                        clearInterval(interval)
                    } else {
                        console.log(data['message'])
                        if (data['code'] == 200) {
                            clearInterval(interval)
                        }
                        $('#result').html(data['message']);
                    }
                })
            }, 500)
        }
    });

</script>



</html>
